<template>
  <el-col class="fold-container" :class="{'show':show,'hide':!show}"  :span="span" :xs="xs">
    <slot></slot>
    <div class="hint" @click="toggle" :style="togglehintStyle">
      <img src="./arrow.png" :style="toggleimgStyle" >
      <span>{{ show ? '收缩' : '展开'}}</span>
    </div>
  </el-col>
</template>

<script>
export default {
  name:'fold-container',
  props:{
    span:{
      type:Number
    },
    xs:{
      type:Number
    },
    show:{
      type:Boolean,
      default:true
    }
  },
  computed:{
    toggleClass(){
      if(this.show){
        return {
          // width:'auto',
          padding:'0px 0 0 10px'
        }
      }else{
        return{
          padding:0,
          width:'0px',
          padding:'0px'
        }
      }
    },
    toggleStyle(){
      if(this.show){
        return {
          // width:'auto',
          padding:'0px 0 0 10px'
        }
      }else{
        return{
          padding:0,
          width:'0px',
          padding:'0px'
        }
      }
    },
    togglehintStyle(){
      if(this.show){
        return {}
      }else{
        return{
          'border-radius':'0 5px 5px 0',
          'right':'-20px'
        }
      }
    },
    toggleimgStyle(){
     if(this.show){
        return {}
      }else{
        return{
          'transform':'rotate(180deg)'
        }
      }
    }
  },
  methods:{
    toggle(){
      this.$emit('update:show', this.show = !this.show)
    }
  }
}
</script>

<style lang="scss" scoped>
.fold-container{
  &.show{
    padding:0px 0 0 10px !important;
  }
  &.hide {
    padding:0 !important;
    width:0px !important;
    padding:0px !important;
    ::v-deep div{
      border: none !important;
    }
  }
  position: relative;
  transition: all .3s ease-in-out;
  >.hint{
    z-index: 10;
    position: absolute;
    top:calc(40% - 25px);
    right: 0px;
    width: 20px;
    height: 50px;
    color: #fff;
    background-color: rgba(0,0,0,.5);
    border-radius: 5px 0 0 5px;
    cursor: pointer;
    font-size: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    img{
      width: 15px;
      height: 15px;
    }
    span{
      width: 20px;
      text-align: center;
    }
  }
}
</style>
